<template>
  <div class="custom-body" :style="borderStyle">
    <el-empty
      v-if="dataList === null || dataList.length === 0"
      class="custom-right"
      :image-size="100"
    />
    <div v-else class="custom-right" :style="contentStyle">
      <div class="iconleft" />
      <div class="title">与我相关</div>
      <a
        v-for="(item, index) in dataList"
        :key="'server-' + index"
        :style="liStyle"
        class="custom-right-li"
        @click="openEntity(item)"
      >

        <span class="custom-li-title">{{ item[column[0].title] }}</span>

      </a>
    </div>
  </div>
</template>

<script>
import { template } from '@/mixins/template'
import { layout } from '@/mixins/layout'
export default {
  name: 'PcImageListApplicationTemp',
  // 快速导航
  mixins: [layout, template],
  computed: {
    lineStyle() {
      return {
        '--font-color': this.layoutTheme.menuColor,
        '--font-active-color': this.layoutTheme.menuActiveColor,
        '--back-color': this.layoutTheme.menuActiveBackground
      }
    },
    liStyle() {
      const width = (100 / this.setting.row).toFixed(2)
      const height = (
        100 / Math.ceil(this.setting.size / this.setting.row)
      ).toFixed(2)
      return {
        width: width + '%',
        height: height + '%'
        // borderRight: '1px solid ' + this.themes.bkys,
        // borderBottom: '1px solid ' + this.themes.bkys
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.custom-body {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  border-radius: 4px;
  box-sizing: border-box;
  overflow: hidden;

}
.custom-right {
  flex: 1 1 auto;
  width: 100%;
  height: 430px;
  padding: 21px 25px 10px;
  position: relative;
  background-image: linear-gradient(#d8e6f4,#fbfcfe);
  border-radius: 8px;
  border: 3px solid #e7f2fc;
  overflow-y: auto;
}

.iconleft {
    position: absolute;
    top: 0;
    left: 0;
    width: 48px;
    height: 44px;
    background: url() no-repeat;
}
.title{
    width: 100%;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    font-family: Microsoft YaHei;
    color: #212a39;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(191,192,200,.3);
    margin-bottom: 10px;
}

.custom-right-li .custom-li-title:before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    position: absolute;
    top: 14px;
    left: 10px;
    background: url() no-repeat;
}
.custom-right-li {
  display: block;
  width: 100%;
  height: 42px;
  line-height: 42px;
  font-size: 16px;
  color: #6b6f8c;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  padding: 0 10px 0 30px;
  cursor: pointer;
  // width: 33.3333%;
  //padding: 15px;
  box-sizing: border-box;
  cursor: pointer;
  // height: 50%;
  // float: left;
  //position: relative;

}

.custom-right-li:hover {
    background: #eff5fb;
    border: 1px solid #276eed;
    box-shadow: 0 8px 16px 0 rgb(225 227 229/79%);
    border-radius: 4px;
    color: #212a39;
}

</style>
